<template>
	<view class="container">
		<!-- 表单内容 -->
		<view class="form-content">
			<view class="form-item">
				<text class="label">收货人</text>
				<input 
					type="text" 
					v-model="formData.name" 
					placeholder="请输入收货人姓名"
					class="input"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">手机号码</text>
				<input 
					type="number" 
					v-model="formData.phone" 
					placeholder="请输入手机号码" 
					maxlength="11"
					class="input"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">所在地区</text>
				<picker 
					mode="region" 
					@change="handleRegionChange"
					class="picker"
				>
					<view class="picker-content">
						<text>{{formData.province || '请选择'}}</text>
						<text class="arrow">></text>
					</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">详细地址</text>
				<textarea 
					v-model="formData.address" 
					placeholder="请输入详细地址"
					class="textarea"
				/>
			</view>
			
			<view class="form-item">
				<text class="label">设为默认地址</text>
				<switch 
					:checked="formData.isDefault" 
					@change="handleDefaultChange"
					color="#D02B29"
				/>
			</view>
		</view>
		
		<!-- 保存按钮 -->
		<view class="save-btn" @click="saveAddress">
			<text>保存</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 表单数据
const formData = ref({
	id: null,
	name: '',
	phone: '',
	province: '',
	city: '',
	district: '',
	address: '',
	isDefault: false
})

// 页面加载时获取地址信息
onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const id = currentPage.options.id
	
	if (id) {
		// 这里可以添加获取地址详情的接口调用
		// 模拟数据
		formData.value = {
			id: parseInt(id),
			name: '张三',
			phone: '13800138000',
			province: '四川省',
			city: '成都市',
			district: '武侯区',
			address: '天府大道1号',
			isDefault: true
		}
	}
})

// 处理地区选择
const handleRegionChange = (e) => {
	const [province, city, district] = e.detail.value
	formData.value.province = province
	formData.value.city = city
	formData.value.district = district
}

// 处理默认地址切换
const handleDefaultChange = (e) => {
	formData.value.isDefault = e.detail.value
}

// 保存地址
const saveAddress = () => {
	// 表单验证
	if (!formData.value.name) {
		uni.showToast({
			title: '请输入收货人姓名',
			icon: 'none'
		})
		return
	}
	
	if (!formData.value.phone) {
		uni.showToast({
			title: '请输入手机号码',
			icon: 'none'
		})
		return
	}
	
	if (!/^1[3-9]\d{9}$/.test(formData.value.phone)) {
		uni.showToast({
			title: '手机号格式不正确',
			icon: 'none'
		})
		return
	}
	
	if (!formData.value.province) {
		uni.showToast({
			title: '请选择所在地区',
			icon: 'none'
		})
		return
	}
	
	if (!formData.value.address) {
		uni.showToast({
			title: '请输入详细地址',
			icon: 'none'
		})
		return
	}
	
	// 这里可以添加保存地址的接口调用
	uni.showToast({
		title: '保存成功',
		icon: 'success',
		success: () => {
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	})
}
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

/* 表单内容样式 */
.form-content {
	background-color: #FFFFFF;
	padding: 30rpx;
	margin-top: 20rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.form-item:last-child {
	margin-bottom: 0;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.input {
	width: 100%;
	height: 88rpx;
	background-color: #F5F5F5;
	border-radius: 44rpx;
	padding: 0 40rpx;
	font-size: 28rpx;
}

.textarea {
	width: 100%;
	height: 160rpx;
	background-color: #F5F5F5;
	border-radius: 20rpx;
	padding: 20rpx;
	font-size: 28rpx;
}

.picker {
	width: 100%;
	height: 88rpx;
	background-color: #F5F5F5;
	border-radius: 44rpx;
}

.picker-content {
	width: 100%;
	height: 100%;
	padding: 0 40rpx;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.arrow {
	color: #999;
}

/* 保存按钮样式 */
.save-btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100rpx;
	background-color: #D02B29;
	color: #FFFFFF;
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style> 